import { Component, OnInit } from '@angular/core';
import { SNode, Condition, NodeData, NodeCondition, MoveType, NodePlain } from '../module';
import { SvgService } from './svg.service';
import { CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY } from '@angular/cdk/overlay/typings/overlay-directives';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-svgdom',
  templateUrl: './svgdom.component.html',
  styleUrls: ['./svgdom.component.scss']
})
export class SvgdomComponent implements OnInit {
  // tslint:disable-next-line: member-ordering
  conditiondata: Condition = {
    Field: '',
    Operate: '',
    Value: '',
    PlainText: ''
  };
  conditiondataone: Condition = {
    Field: 'aaa',
    Operate: '=',
    Value: 'aaa',
    PlainText: ''
  };
  conditiondatatwo: Condition = {
    Field: '',
    Operate: '',
    Value: '',
    PlainText: 'abc=abc'
  };
  // 加的一些数据
  // tslint:disable-next-line: member-ordering
  datas: NodeData = {
    Conditions: this.conditiondata,
    ColumnNames: ['a', 'b'],
    IsSvgDisplay: true,
    IsDisplay: true, // 除线条之外是否显示
    IsExistele: false, // 该点是否有收缩，true为有
    IsMarkDisplay: false
  };
  datasone: NodeData = {
    Conditions: this.conditiondataone,
    ColumnNames: ['a', 'b'],
    IsSvgDisplay: true,
    IsDisplay: true, // 除线条之外是否显示
    IsExistele: false, // 该点是否有收缩，true为有
    IsMarkDisplay: false
  };
  datastwo: NodeData = {
    Conditions: this.conditiondatatwo,
    ColumnNames: ['a', 'b'],
    IsSvgDisplay: true,
    IsDisplay: true, // 除线条之外是否显示
    IsExistele: false, // 该点是否有收缩，true为有
    IsMarkDisplay: false
  };
  // 数据源的点
  // tslint:disable-next-line: member-ordering
  dataSourcs = new SNode();
  childone = new SNode();
  childtwo = new SNode();
  AddNodeCondition() {
    const lt: Condition = {
      Field: 'aa',
      Operate: '=',
      Value: 'aa',
      PlainText: ''
    };
    this.addNodeCondition(lt);
  }
  AddNodePainText() {
    const lt: Condition = {
      Field: '',
      Operate: '',
      Value: '',
      PlainText: 'text=text'
    };
    this.addNodeCondition(lt);
  }
  addNodeCondition(con: Condition) {
    if (this.ser.SelectNode) {
      const ds: SNode = new SNode();
      const dt: NodeData = {
        Conditions: this.ser.SelectNode.Data.Conditions,
        ColumnNames: this.ser.SelectNode.Data.ColumnNames, // 列的所有名称，用来弹出框中的下拉选项
        IsSvgDisplay: true, // svg线条是否显示,true为显示
        IsDisplay: true, // 除线条之外是否显示
        IsExistele: false, // 该点是否有收缩，true为有
        IsMarkDisplay: false // 遮罩层是否显示，true为显示
      };
      dt.Conditions = con;
      ds.Data = dt;

      if (con.PlainText === '') {
        ds.NodeType = NodeCondition;
      } else {
        ds.NodeType = NodePlain;
      }
      ds.Parent = this.ser.SelectNode;
      ds.Status = 'n';

      this.ser.SelectNode.AddChildNode(ds);
    } else {
      alert('请先选择激活一个节点');
    }
  }

  // 正在拖拽的点，模拟新增字段
  SetMovingSNode() {
    const nd: SNode = new SNode();
    const conditionData: Condition = {
      Field: 'stb',
      Operate: '=',
      Value: 'stb',
      PlainText: ''
    };
    const da: NodeData = {
      Conditions: conditionData,
      ColumnNames: ['a', 'b'],
      IsSvgDisplay: true,
      IsDisplay: true, // 除线条之外是否显示
      IsExistele: false, // 该点是否有收缩，true为有
      IsMarkDisplay: false
    };
    nd.Children = [];
    nd.NodeType = NodeCondition;
    nd.Parent = null;
    nd.Status = 'N';
    nd.Data = da;
    const ms: MoveType = {
      MoveSNode: nd,
      AddOrMove: true // true为新增
    };

    this.ser.MovingData = ms;
    this.ser.IsMaskDisplayShow = true;
  }

  show() {
    console.log('datasource====:', this.dataSourcs);
  }
  // 拖拽释放事件
  CdkDrop(event: CdkDragDrop<{ title: string; poster: string }[]>) {
    this.ser.IsMaskDisplayShow = false;
  }

  constructor(private ser: SvgService) {}

  ngOnInit() {
    // this.ser.sourceNode = this.dataSourcs; // 保留根节点
    this.dataSourcs.Children = [];
    this.dataSourcs.NodeType = 'h';
    this.dataSourcs.Parent = null;
    this.dataSourcs.Status = 'N';
    this.dataSourcs.Data = this.datas;

    this.childone.Children = [];
    this.childone.NodeType = 'c';
    this.childone.Parent = null;
    this.childone.Status = 'N';
    this.childone.Data = this.datasone;
    this.childone.Parent = this.dataSourcs;
    this.dataSourcs.Children.push(this.childone);

    this.childtwo.Children = [];
    this.childtwo.NodeType = 't';
    this.childtwo.Parent = null;
    this.childtwo.Status = 'N';
    this.childtwo.Data = this.datastwo;
    this.childtwo.Parent = this.dataSourcs;
    this.dataSourcs.Children.push(this.childtwo);
  }
}
